<template>
  <div class="draw-circle"  @touchstart="touch" @touchmove="touch" @touchend="touch">
    <div class="circle"></div>
    <!-- <canvas class="canvas" ref="canvas" width="750" height="1334"></canvas> -->
    <canvas class="canvas" ref="canvas" :width="rect?.width" :height="rect?.height"></canvas>
  </div>
</template>
<script lang="ts">
import { Vue,  Options, Emit } from 'vue-property-decorator';
import * as THREE from 'three';
import Particle from '../libs/Particle';
@Options({ components: {} })
export default class DrawCircle extends Vue {
  public rect: DOMRect|null=null;
  public ctx: CanvasRenderingContext2D|null=null;
  public touchScale = 1;
  public touchState = 0;
  public touchPath = [0, 0, 0, 0, 0, 0, 0, 0];
  public touchPos = { x: 0, y: 0 };
  public progress =0;

  public touch(e: TouchEvent) {
    switch (e.type) {
      case 'touchstart':
      case 'touchmove': {
        const touchX = e.touches[0].pageX * this.touchScale - this.rect!.width / 2;
        const touchY = e.touches[0].pageY * this.touchScale - this.rect!.height / 2;
        const radius = Math.hypot(touchX, touchY) / window.autoScale;
        if (radius < this.rect!.width / 1.8 && radius >  this.rect!.width / 5) {
          // console.log(Math.round(this.progress * 7));
          console.log(...this.touchPath);
          // 在可绘制区域内
          if (this.touchState !== -1) {
            this.touchState = 1;
            this.progress = (Math.atan2(touchX, touchY) + Math.PI) / (Math.PI * 2);
            this.touchPath[Math.round(this.progress * 7)] = 1;
            this.ctx!.clearRect(0, 0, this.rect!.width, this.rect!.height);
            this.ctx!.save();
            this.ctx!.fillRect(e.touches[0].pageX, e.touches[0].pageY, 10, 10);
            this.ctx!.restore();
          }
        } else {
          // 不在可绘制区域内
          console.log('不可');
          if (!this.touchPath.includes(0)) {
            this.next();
          }
          this.touchPath = [0, 0, 0, 0, 0, 0, 0, 0];
          if (this.touchState === 1) {
            this.touchState = -1;
          }
        }
        break;
      }
      case 'touchend': {
        this.touchState = 0;
        // 用户绘制圆的路径完整 全部都不是0
        if (!this.touchPath.includes(0)) {
          this.next();
        }
        this.touchPath =  [0, 0, 0, 0, 0, 0, 0, 0];
        break;
      }
    }
  }
  @Emit() private next() {}
  public mounted() {
    this.rect = (this.$el as HTMLElement).getBoundingClientRect();
    console.log(this.rect);
    this.ctx = (this.$refs.canvas as HTMLCanvasElement).getContext('2d');
    this.touchScale = this.rect!.width / window.innerWidth;
    this.ctx!.fillStyle = '#fff';
  }
}
</script>
<style scoped lang="postcss">
.draw-circle{
  touch-action: none;
  position: absolute;
  left: 0%;top: 0%;
  width: 100%;height: 100%;
  .circle{
    position: absolute;
    left: 50%;top: 50%;
    background: url(../assets/circle.png#s.5);
    background-image: none;
    transform:rotateZ(-360deg);
    animation: rotateAni 10s linear infinite;
    &::before{
      content:'';
      position: absolute;
      left: 3%;top: 3%;
      width: 94%;height: 94%;
      border:1px dotted #13FFFF;
      border-radius: 50%;
    }
    &::after{
      content: '';
      position: absolute;
      top: 1.5%;left: 50%;
      width: 0;height: 0;
      border-left:7px solid #13ffff;
      border-top:5px solid transparent;
      border-bottom:5px solid transparent;
    }
  }
  .canvas{
    position: absolute;
    left: 0;top: 0;
    width: 100%;height: 100%;
  }
}
@keyframes rotateAni {
  100%{
    transform: none;
    opacity: 1;
  }
}
</style>
